<template>
  <div class="left-nav">
    <!-- 边栏 -->
    <ul class="erea">
      <li
        v-for="(item, index) in channelListData"
        :key="index"
        @click="activedFun(item.id)"
        :class="{ actived: activeID == item.id }"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="link">
      <h3>{{ $t('More_Link') }}</h3>
      <a href="https://camchat.im" target="_blank">CAMChat</a>
      <a
        v-if="$i18n.locale === 'zh'"
        href="http://www.7jpz.com/"
        target="_blank"
        >柬埔寨中文社区</a
      >
      <a
        v-if="$i18n.locale === 'km'"
        href="https://www.facebook.com/Tnaot.kh/"
        target="_blank"
        >TNAOT on FaceBook</a
      >
      <a href="https://www.khfdd.com/" target="_blank">{{
        $t('fang_duo_duo')
      }}</a>
    </div>
    <div class="info">
      <p>© 2020 TNAOT</p>
      <p>
        <a href="http://beian.miit.gov.cn/" target="_blank"
          >粤ICP备18129079号-2</a
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeID: '' //选中的频道id，默认84，柬埔寨
    };
  },
  props: {
    channelListData: {
      default: []
    },
    channelId: {
      default: ''
    }
  },
  mounted() {
    this.activeID = this.channelId;
  },
  methods: {
    activedFun(val) {
      this.$emit('changeChannel', val);
    },
    // 样式切换
    cssChange(val) {
      this.activeID = val;
    }
  }
};
</script>

<style scoped lang="scss">
.left-nav {
  width: 110px;
  color: #69768a;
  margin: 0 40px 0 0;
  position: fixed;
  top: 88px;
  left: 50%;
  z-index: 99;
  transform: translateX(-380px);
  .erea {
    border-bottom: 1px solid #eceff6;
    li {
      line-height: 48px;
      height: 48px;
      padding: 0 0 0 18px;
      font-size: 16px;
      &:hover {
        background: #f7f7f9;
        cursor: pointer;
        color: rgba(12, 12, 28, 1);
      }
      &.actived {
        height: 48px;
        line-height: 48px;
        color: rgba(12, 12, 28, 1);
        font-weight: bold;
        position: relative;
        padding: 0 0 0 18px;
        box-sizing: border-box;
        &::after {
          display: block;
          content: '';
          width: 6px;
          height: 24px;
          background: linear-gradient(
            225deg,
            rgba(255, 168, 68, 1) 0%,
            rgba(250, 70, 70, 1) 100%
          );
          border-radius: 2px;
          position: absolute;
          top: 12px;
          left: 0;
          z-index: 99;
        }
      }
    }
  }
  .link {
    padding: 20px 0;
    font-size: 12px;
    line-height: 2;
    border-bottom: 1px solid #eceff6;
    h3 {
      font-size: 12px;
      font-weight: bold;
      color: rgba(12, 12, 28, 0.7);
    }
    a {
      font-size: 12px;
      display: block;
      color: rgba(12, 12, 28, 0.7);
      &:hover {
        color: rgba(12, 12, 28, 1);
      }
    }
  }
  .info {
    font-size: 12px;
    padding: 20px 0;
    p {
      margin: 0 0 10px 0;
      a {
        font-size: 12px;
        display: block;
        color: rgba(12, 12, 28, 0.7);
        &:hover {
          color: rgba(12, 12, 28, 1);
        }
      }
    }
  }
}
</style>
